<style lang="scss" scoped>
$width: 20px;
$height: 20px;

#math {
  position: absolute;
  margin: 3px;
  border-radius: 100%;
  width: $width;
  height: $height;
  background: v-bind(mathColor);
  color: rgb(255, 255, 255, 0);
}

#china {
  position: absolute;
  margin: 3px;
  border-radius: 100%;
  width: $width;
  height: $height;
  background: v-bind(chinaColor);
  color: rgb(255, 255, 255, 0);
}

</style>

<template>
  <div>
    姓名：<input type="text" v-model="name"/>
    <p>语文：<input type="number" v-model="china"/><span id="china">{{ chinaColor }}</span></p>
    <p>数学：<input type="number" v-model="math"/><span id="math">{{ mathColor }}</span></p>
    <div>
      总分：<span>{{ china * 1 + math * 1 }}分</span>
    </div>
  </div>
  评：<span>{{ Num }}</span>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";

let name = ref('')
let china = ref('0')
let math = ref('0')
let chinaColor = computed(() => {
  if (china.value * 1 >= 80) {
    return '#4fbe05'
  }
  if (china.value * 1 >= 60) {
    return '#f1e505'
  } else {
    return '#ee001e'
  }
})
let mathColor = computed(() => {
  if (math.value * 1 >= 80) {
    return '#4fbe05'
  }
  if (math.value * 1 >= 60) {
    return '#f1e505'
  } else {
    return '#ee001e'
  }
})
let Num = computed(() => {
  if (china.value * 1 + math.value * 1 >= 160) {
    return '优'
  }
  if (china.value * 1 + math.value * 1 >= 120) {
    return '良'
  } else {
    return '差！'
  }
})
</script>